<template>
  <div>
    <h3>{{title}}</h3>
    <a v-for="(item,index) in titleList" href="" :key="index" @mouseenter="change1(index,name)"
       >{{item}}</a>
  </div>
</template>

<script>
export default {
  name: "health2",
  props: ['title', 'titleList', 'name'],
  methods: {
    change1(index, b) {
      if ('family' == b){
        this.familyJump(index)}
      if('smart'==b){
        this.smartJump(index)}
      if('match'==b){
        this.matchJump(index)}
      if('parts'==b){
        this.partsJump(index)}
      if('rim'==b){
        this.rimJump(index)}
    },
    familyJump(index) {
      this.$store.dispatch('familyJump', index)
    },
    smartJump(index) {
      this.$store.dispatch('smartJump', index)
    },
    matchJump(index) {
      this.$store.dispatch('matchJump', index)
    },
    partsJump(index) {
      this.$store.dispatch('partsJump', index)
    },
    rimJump(index) {
      this.$store.dispatch('rimJump', index)
    },
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
}
div {
  margin: 10px auto 0 auto;
  width: 1226px;
  height:58px;
}
div h3 {
  float: left;
  height: 25px;
  margin-top: 0;
  line-height: 58px;
  font-weight: 200;
  color: #333;
}
div a {
  display: block;
  margin-top: 0;
  line-height: 58px;
  float: right;
  color: #424242;
  font-size: 16px;
  margin-left: 20px;
  height: 40px;

}
div a:hover {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}
</style>